<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('指标 search_result')" />
    <link th:href="@{/static/css/input/top_search.css?v=1.0.6}" rel="stylesheet">
    <style>
        .font_p3{
            font-size: 13px;
            margin: 2px 0 0 0;
        }
        .font_color_qian{
            color: #9b9b9c;
        }
        #result-list-ul>li:hover{
            background-color: #e5e5e5;
        }
        #search_result_title{
            cursor: pointer;
            width: 315px;
        }

        #search_input_div{
            height: 50px;
            width: 60%;
            position: relative;
            margin-top: 24px;
            margin-right: 28px;
        }

        #logout_btn_div{
            width: 50px;
            height: 50px;
            right: 0;
            background-color: #128ef2;
            border-radius: 6px;
            color: #FFF;
            line-height: 50px;
            font-size: 20px;
            cursor: pointer;
            text-align: center;
        }
    </style>
</head>

<body style="overflow-x: hidden">


<div id="content-container" style="padding-bottom: 0; padding-top: 0">

    <div class="row bg-dark">

        <!--左侧title-->
        <div class="col-xs-7 text-left" onclick="window.location.href='/'" style="cursor: pointer">
<!--            <div class="col-xs-8 text-right" id="search_result_title" onclick="window.location.href='/'">-->
<!--                <span class="text-bold text-primary" style="font-size: 70px">NET</span>-->
<!--                <span class="text-bold" style="font-size: 70px">LAB</span>-->
<!--            </div>-->
<!--            <div class="col-xs-4 text-left" style="width: 240px">-->
<!--                <p class="font_p3 text-bold" style="margin-top: 22px">OpenData Project</p>-->
<!--                <p class="font_p3 font_color_qian">By Hospital Quality Research</p>-->
<!--                <p class="font_p3 font_color_qian">医院质量大数据开放实验室</p>-->
<!--            </div>-->
            <img src="/static/img/title_search.png" height="100px" width="auto" style="padding: 25px 0 25px 20px"/>
        </div>

        <!--右侧搜索框-->
        <div class="col-xs-5">
            <div id="search_input_div" class=" pull-right">

                <div id="logout_btn_div" class="search-wrapper" onclick="window.location.href='/logout'">
                    <i class="fa fa-sign-out"></i>
                </div>

                <div class="search-wrapper">
                    <div class="input-holder">
                        <input type="text" id="search_input" class="search-input" placeholder="Search..." autocomplete="off" />
                        <button class="search-icon" onclick="searchToggle(this, event);">
                            <span></span>
                        </button>
                    </div>
                    <span class="close" onclick="searchToggle(this, event);"></span>
                </div>

            </div>
        </div>

    </div>

    <!--<div class="col-xs-12 col-sm-10 col-sm-offset-1 pad-hor">-->
        <!--<input id="search_inner_input" type="text" class="form-control input-lg" placeholder="Search.." autocomplete="off" th:value="${key}">-->
        <!--<button onclick="do_inner_search()" type="button" class="btn btn-primary" style="position: absolute; top: 0; right: 0; height: 40px; width: 80px">搜索</button>-->
    <!--</div>-->

    <!--Page content-->
    <!--===================================================-->
    <div id="page-content">

        <div class="panel">
            <div class="panel-body" style="position: relative">

                <div class="search-div" style="z-index: 9999; position: absolute; width: 100%; height: 100%; left: 0; top: 0; min-height: 800px; background-color: #FFF; display: none">
                    <canvas id="canvasOne" width="500" height="500" style="width: 500px; display: block; margin: 100px auto 0 auto"></canvas>
                </div>

                <div class="pad-hor mar-top">
                    <h3 class="text-thin mar-no"><span th:text="为您找到了相关结果共+${page.records}+条"></span><i class="text-primary text-normal" th:text="${key}">无关键词</i></h3>
                    <!--<small th:text="'第'+${page.page}+'页'"></small>-->
                </div>

                <hr>

                <ul id="result-list-ul" class="list-group bord-no">

                    <li class="list-group-item list-item-lg bord-btm" th:each="target : ${targetList}" style="border-bottom: 2px solid #888">
                        <div class="media-heading">
                            <a class="h4 text-primary mar-no" target="_blank" th:href="'/wiki/' + ${target.id}" th:data-title="${target.id}" th:text="${target.name}"></a>
                        </div>

                        <p class="text-sm">
                            <small class="text-muted">指标分类:</small>
                            <span th:text="${target.targetClassDict?.name}"></span>
                        </p>

                        <div class="pad-btm">
                            <small class="text-muted">指标标签:</small>
                            <div class="label label-mint" th:each="name : ${#strings.listSplit(target.targetLabel, '&')}" th:text="${name}"></div>
                        </div>

                        <div class="pad-btm">
                            <small class="text-muted">关联指标:</small>
                            <div class="label label-mint" th:each="name : ${#strings.listSplit(target.relatedTargetNames, ',')}" th:text="${name}"></div>
                        </div>
                    </li>

                </ul>

                <hr class="hr-wide">

                <!--Pagination-->
                <div class="text-center">
                    <!--<p th:text="'当前第'+${page.page}+'页;每页显示'+${page.rows}+'条;共有数据'+${page.records}+'条;共有页数'+${page.total}+'页'"></p>-->

                    <ul class="pager">
                        <span class="mar-rgt">[[${page.page}]]<span class="text-bold"> of </span>[[${page.total}]]</span>
                        <li><a th:href="${page.page == 1} ? 'javascript:void(0)' : '/search_result/'+${key}+'?p='+${page.page - 1}" class="btn btn-default btn-sm" th:disabled="${page.page == 1}"><i class="psi-arrow-left"></i> 上一页</a></li>
                        <li><a th:href="${page.page == page.total} ? 'javascript:void(0)' : '/search_result/'+${key}+'?p='+${page.page + 1}" class="btn btn-default btn-sm" th:disabled="${page.page == page.total}">下一页 <i class="psi-arrow-right"></i></a></li>
                    </ul>

                </div>
            </div>
        </div>



    </div>
    <!--===================================================-->
    <!--End page content-->


</div>
<!--===================================================-->
<!--END CONTENT CONTAINER-->

</body>

<th:block th:include="include :: footer" />
<script th:src="@{/static/js/search/modernizr.min.js}"></script>

<script th:inline="javascript">

    $(function(){

    });

    //搜索框中回车触发搜索跳转
    $("#search_input").on("keypress", function(){
        if(window.event.keyCode === 13){
            do_inner_search();
        }
    });

    //搜索
    function do_inner_search(){
        $("#search_input").blur();
        var keyVal = $("#search_input").val();
        if(isNotNull(keyVal)){
            window.location.href = "/search_result/"+keyVal;
        }
    }

    //搜索框展开折叠
    function searchToggle(obj, evt){
        if($(obj).hasClass("search-icon")){
            do_inner_search();
        }

        var container = $(obj).closest('.search-wrapper');
        if(!container.hasClass('active')){
            container.addClass('active');
            evt.preventDefault();
        } else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
            container.removeClass('active');
            container.find('.search-input').val('');
        }
    }


    //球星搜索效果
    $(document).ready(function () {
        var p = [[${page.page}]];
        if(p == 1){
            $(".search-div").show();
            window.addEventListener("load", windowLoadHandler, false);
            setTimeout(function(){
                $(".search-div").fadeOut("slow", function(){
                    $(".search-div").remove();
                });
            }, 2000)
        }

    });

    var sphereRad = 280;
    var radius_sp=1;
    var opt_display_dots = false;

    var unicodeFlakes = [ '上','海' ,'汉','乾','基','石','系','统'];

    //for debug messages
    var Debugger = function() { };
    Debugger.log = function(message) {
        try {
            console.log(message);
        }
        catch (exception) {
            return;
        }
    }

    function windowLoadHandler() {
        canvasApp();
    }

    function canvasSupport() {
        return Modernizr.canvas;
    }

    function canvasApp() {
        if (!canvasSupport()) {
            return;
        }
        var theCanvas = document.getElementById("canvasOne");
        var context = theCanvas.getContext("2d");

        var displayWidth;
        var displayHeight;
        var timer;
        var wait;
        var count;
        var numToAddEachFrame;
        var particleList;
        var recycleBin;
        var particleAlpha;
        var r,g,b;
        var fLen;
        var m;
        var projCenterX;
        var projCenterY;
        var zMax;
        var turnAngle;
        var turnSpeed;
        var sphereCenterX, sphereCenterY, sphereCenterZ;
        var particleRad;
        var zeroAlphaDepth;
        var randAccelX, randAccelY, randAccelZ;
        var gravity;
        var rgbString;
        //we are defining a lot of variables used in the screen update functions globally so that they don't have to be redefined every frame.
        var p;
        var outsideTest;
        var nextParticle;
        var sinAngle;
        var cosAngle;
        var rotX, rotZ;
        var depthAlphaFactor;
        var i;
        var theta, phi;
        var x0, y0, z0;

        init();

        // INITIALLI
        function init() {
            wait = 1;
            count = wait - 1;
            numToAddEachFrame = 4;


            //particle color0,191,255
            r = 0;
            g = 191;
            b = 255;

            rgbString = "rgba("+r+","+g+","+b+","; //partial string for color which will be completed by appending alpha value.
            particleAlpha = 1; //maximum alpha

            displayWidth = theCanvas.width;
            displayHeight = theCanvas.height;

            fLen = 320; //represents the distance from the viewer to z=0 depth.

            //projection center coordinates sets location of origin
            projCenterX = displayWidth/2;
            projCenterY = displayHeight/2;

            //we will not draw coordinates if they have too large of a z-coordinate (which means they are very close to the observer).
            zMax = fLen-2;

            particleList = {};
            recycleBin = {};

            //random acceleration factors - causes some random motion
            randAccelX = 0.1;
            randAccelY = 0.1;
            randAccelZ = 0.1;

            gravity = -0; //try changing to a positive number (not too large, for example 0.3), or negative for floating upwards.

            particleRad = 2.5;

            sphereCenterX = 0;
            sphereCenterY = 0;
            sphereCenterZ = -3 - sphereRad;

            //alpha values will lessen as particles move further back, causing depth-based darkening:
            zeroAlphaDepth = -750;

            turnSpeed = 2*Math.PI/1200; //the sphere will rotate at this speed (one complete rotation every 1600 frames).
            turnAngle = 0; //initial angle

            timer = setInterval(onTimer, 10/24);
        }

        function onTimer() {
            //if enough time has elapsed, we will add new particles.
            count++;
            if (count >= wait) {

                count = 0;
                for (i = 0; i < numToAddEachFrame; i++) {
                    theta = Math.random()*2*Math.PI;
                    phi = Math.acos(Math.random()*2-1);
                    x0 = sphereRad*Math.sin(phi)*Math.cos(theta);
                    y0 = sphereRad*Math.sin(phi)*Math.sin(theta);
                    z0 = sphereRad*Math.cos(phi);

                    //We use the addParticle function to add a new particle. The parameters set the position and velocity components.
                    //Note that the velocity parameters will cause the particle to initially fly outwards away from the sphere center (after
                    //it becomes unstuck).
                    var p = addParticle(x0, sphereCenterY + y0, sphereCenterZ + z0, 0.002*x0, 0.002*y0, 0.002*z0);

                    //we set some "envelope" parameters which will control the evolving alpha of the particles.
                    p.attack = 50;
                    p.hold = 50;
                    p.decay = 100;
                    p.initValue = 0;
                    p.holdValue = particleAlpha;
                    p.lastValue = 0;

                    //the particle will be stuck in one place until this time has elapsed:
                    p.stuckTime = 90 + Math.random()*20;

                    p.accelX = 0;
                    p.accelY = gravity;
                    p.accelZ = 0;
                }
            }

            //update viewing angle
            turnAngle = (turnAngle + turnSpeed) % (2*Math.PI);
            sinAngle = Math.sin(turnAngle);
            cosAngle = Math.cos(turnAngle);

            //background fill
            context.fillStyle = "#FFF";
            context.fillRect(0,0,displayWidth,displayHeight);

            //update and draw particles
            p = particleList.first;
            while (p != null) {
                //before list is altered record next particle
                nextParticle = p.next;

                //update age
                p.age++;

                //if the particle is past its "stuck" time, it will begin to move.
                if (p.age > p.stuckTime) {
                    p.velX += p.accelX + randAccelX*(Math.random()*2 - 1);
                    p.velY += p.accelY + randAccelY*(Math.random()*2 - 1);
                    p.velZ += p.accelZ + randAccelZ*(Math.random()*2 - 1);

                    p.x += p.velX;
                    p.y += p.velY;
                    p.z += p.velZ;
                }

                /*
                 We are doing two things here to calculate display coordinates.
                 The whole display is being rotated around a vertical axis, so we first calculate rotated coordinates for
                 x and z (but the y coordinate will not change).
                 Then, we take the new coordinates (rotX, y, rotZ), and project these onto the 2D view plane.
                 */
                rotX =  cosAngle*p.x + sinAngle*(p.z - sphereCenterZ);
                rotZ =  -sinAngle*p.x + cosAngle*(p.z - sphereCenterZ) + sphereCenterZ;
                m =radius_sp* fLen/(fLen - rotZ);
                p.projX = rotX*m + projCenterX;
                p.projY = p.y*m + projCenterY;

                //update alpha according to envelope parameters.
                if (p.age < p.attack+p.hold+p.decay) {
                    if (p.age < p.attack) {
                        p.alpha = (p.holdValue - p.initValue)/p.attack*p.age + p.initValue;
                    }
                    else if (p.age < p.attack+p.hold) {
                        p.alpha = p.holdValue;
                    }
                    else if (p.age < p.attack+p.hold+p.decay) {
                        p.alpha = (p.lastValue - p.holdValue)/p.decay*(p.age-p.attack-p.hold) + p.holdValue;
                    }
                }
                else {
                    p.dead = true;
                }

                //see if the particle is still within the viewable range.
                if ((p.projX > displayWidth)||(p.projX<0)||(p.projY<0)||(p.projY>displayHeight)||(rotZ>zMax)) {
                    outsideTest = true;
                }
                else {
                    outsideTest = false;
                }

                if (outsideTest||p.dead) {
                    recycle(p);
                }

                else {
                    //depth-dependent darkening
                    depthAlphaFactor = (1-rotZ/zeroAlphaDepth);
                    depthAlphaFactor = (depthAlphaFactor > 1) ? 1 : ((depthAlphaFactor<0) ? 0 : depthAlphaFactor);
                    context.fillStyle = rgbString + depthAlphaFactor*p.alpha + ")";
                    /*ADD TEXT function!*/
                    /*ADD TEXT function!*/
                    /*ADD TEXT function!*/
                    /*ADD TEXT function!*/
                    context.fillText(p.flake,p.projX, p.projY);
                    /*ADD TEXT function!*/
                    /*ADD TEXT function!*/
                    /*ADD TEXT function!*/
                    /*ADD TEXT function!*/
                    //draw
                    context.beginPath();
                    if(opt_display_dots)
                    {context.arc(p.projX, p.projY, m*particleRad, 0, 2*Math.PI, false);}
                    context.closePath();
                    context.fill();
                }

                p = nextParticle;
            }
        }

        function addParticle(x0,y0,z0,vx0,vy0,vz0) {
            var newParticle;
            var color;


            //check recycle bin for available drop:
            if (recycleBin.first != null) {
                newParticle = recycleBin.first;
                //remove from bin
                if (newParticle.next != null) {
                    recycleBin.first = newParticle.next;
                    newParticle.next.prev = null;
                }
                else {
                    recycleBin.first = null;
                }
            }
            //if the recycle bin is empty, create a new particle (a new ampty object):
            else {
                newParticle = {};
            }

            //add to beginning of particle list
            if (particleList.first == null) {
                particleList.first = newParticle;
                newParticle.prev = null;
                newParticle.next = null;
            }
            else {
                newParticle.next = particleList.first;
                particleList.first.prev = newParticle;
                particleList.first = newParticle;
                newParticle.prev = null;
            }

            //initialize
            newParticle.x = x0;
            newParticle.y = y0;
            newParticle.z = z0;
            newParticle.velX = vx0;
            newParticle.velY = vy0;
            newParticle.velZ = vz0;
            newParticle.age = 0;
            newParticle.dead = false;

            newParticle.flake = unicodeFlakes[Math.floor(Math.random() * unicodeFlakes.length)];
            if (Math.random() < 0.5) {
                newParticle.right = true;
            }
            else {
                newParticle.right = false;
            }
            return newParticle;
        }

        function recycle(p) {
            //remove from particleList
            if (particleList.first == p) {
                if (p.next != null) {
                    p.next.prev = null;
                    particleList.first = p.next;
                }
                else {
                    particleList.first = null;
                }
            }
            else {
                if (p.next == null) {
                    p.prev.next = null;
                }
                else {
                    p.prev.next = p.next;
                    p.next.prev = p.prev;
                }
            }
            //add to recycle bin
            if (recycleBin.first == null) {
                recycleBin.first = p;
                p.prev = null;
                p.next = null;
            }
            else {
                p.next = recycleBin.first;
                recycleBin.first.prev = p;
                recycleBin.first = p;
                p.prev = null;
            }
        }
    }

</script>

</html>